<template>
  <views class="enterprise_recharge_guide">
    <div class="guidance">
      <div class="flex flexR guidance_btn">
        <viewTitle :title="title_list[0]" :border="true"></viewTitle>
        <div class="manage_account">
          <el-button type="primary" @click="manage_account" v-show="isManage">管理充值账户</el-button>
        </div>
      </div>

      <!-- 邀请码 -->
      <div class="Invitation_code_list flex flexR">
        <div class="flow_path flex flexC">
          <div>1.企业使用已添加至平台的企业银行账户汇款至指定的平台服务商账户。</div>
          <div>2.平台服务商收到汇款后系统会自动计算入账金额并计入企业账户。</div>
          <div>3.对公账户到账情况可能会有延时，在法定节假日期间进行充值，会影响充值入账延后等情况，为避免企业出款不及时，请于法定工作日进行充值。</div>
          <div class="notice">注：请使用已添加至平台的企业银行账户进行汇款，否则平台无法自动同步资金信息至企业账户，如有疑问请咨询相关客服人员或致电平台客服：400-600-7790。</div>
          <!--<div>第一步：企业需保存专属二维码，发放给待签约的自由职业者;</div>-->
          <!--<div>第二步：自由职业者通过微信扫码进入小程序，根据流程完成签约;</div>-->
          <!--<div>第三步：企业通过“签约记录”查看签约进度，并协助自由职业者签约;</div>-->
          <!--<div>客服电话：400-081-9091</div>-->
        </div>
      </div>
    </div>

    <div class="provider_information">
      <viewTitle :title="title_list[1]" :border="true"></viewTitle>
      <div class="provider_information_table">
        <el-table
          border
          :data="tableData"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed type="index" label="序号" width="100"></el-table-column>
          <el-table-column fixed prop="facilitator_name" label="服务商名称" width="auto"></el-table-column>
          <el-table-column prop="facilitator_bank_code" label="服务商账号" width="auto"></el-table-column>
          <el-table-column prop="facilitator_bank_name" label="开户银行" width="auto"></el-table-column>
          <el-table-column prop="standard_rate" :formatter="(row)=>{return (row.standard_rate*100).toFixed(2)+'%'}" label="标准充值费率" width="auto"></el-table-column>
        </el-table>
      </div>
    </div>
  </views>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      title_list: ["充值引导", "服务商信息"],
      //  三段综合  企业端  代理商端  服务商端
      tableData: []

    };
  },
  computed:{
    ...mapGetters(['getButtonPermission']),
    isManage(){
      return   this.getButtonPermission[this.$route.path] && this.getButtonPermission[this.$route.path].manage ? 1 : 0;
    }
  },

  methods: {
    manage_account() {
      this.$toRoutePath({
        path: "/enterprise_recharge_guide/account_pay_manage",
        edit: true,
        query: {}
      });
    },
    getData(){
        if(this.$store.state.terrace==1){
            this.getEnterpriseData();
        }
    },
    getEnterpriseData(){
        let {code , msg, data} = this.$api.sendSync( this.$mapapi.eAccountGuide);
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }
        // this.data = data;
        this.tableData = data.list;
    },
      //    修改第一行样式
      getRowClass({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
              return "background: #FAFAFA ";
          } else {
              return "";
          }
      },
      //     点击单行
      clickRow(row, column, event) {
          console.log(row, column, event);
      },
      //    修改是否换行
      changeStyleRow(width) {
          let _width = width - 290 - 350 - 300 - 50 - 25;
          if (_width > 300) {
              this.marginLeft = 25;
          } else {
              this.marginLeft = 0;
          }
      },
  },
  mounted() {
    this.getData()
  },
  created() {}
};
</script>

<style lang="less" :scope="true" src="@/style/account/enterprise_recharge_guide.less" >
</style>